<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" class="form-container">
      <!-- <el-form-item style="margin-bottom: 40px;" label="广告点击次数统计：" prop="title">
        {{ postForm.advert | formatAdvert }}
      </el-form-item> -->
      <div class="createPost-main-container">
        <div class="postInfo-container">
          <el-row>

            <el-col :span="2">
              <el-form-item label="金币广告：" label-width="100px" class="postInfo-container-item">
                {{ postForm.advert.AdGold }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="体力广告：" label-width="100px">
                {{ postForm.advert.AdEnergy }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="转盘广告：" label-width="100px">
                {{ postForm.advert.AdTurntable }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="电视机广告：" label-width="100px">
                {{ postForm.advert.AdTV }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="占卜广告：" label-width="100px">
                {{ postForm.advert.AdMagicBall }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="换卡广告：" label-width="100px">
                {{ postForm.advert.AdCard }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="神秘商店广告：" label-width="110px">
                {{ postForm.advert.AdHideShop }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="战斗失败广告：" label-width="110px">
                {{ postForm.advert.AdBattle }}
              </el-form-item>
            </el-col>
            <el-col :span="2">
              <el-form-item label="祭坛广告：" label-width="100px">
                {{ postForm.advert.AdAltar }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-form>
  </div>
  <!-- <div class="filter-container">
    <el-input v-model="listQuery.name" placeholder="name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
    <el-input v-model="listQuery.uid" placeholder="uid" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
    <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
      Search
    </el-button>
  </div> -->

  <!-- <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
    <el-table-column align="center" label="ID" width="50">
      <template slot-scope="scope">{{ scope.$index + 1 }}</template>
    </el-table-column>
    <el-table-column label="广告统计">
      <template slot-scope="scope">{{ jsonObjToStr(scope.row.advert) }}</template>
    </el-table-column>
  </el-table> -->
  <!-- <pagination
    v-show="total>0"
    :total="total"
    :page.sync="listQuery.page"
    :limit.sync="listQuery.pageNum"
    @pagination="fetchData"
  /> -->

</template>

<script>
import { formatDate } from '@/utils/date'
import { adCntList } from '@/api/loglist'
import waves from '@/directive/waves' // waves directive
// import Pagination from '@/components/Pagination' // secondary package based on

const defaultForm = {
  _id: 1,
  advert: ''
}

export default {
  // components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    formatDate(time) {
      var date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    formatAdvert(objson) {
      var content = ''
      for (var item in objson) {
        if (item === 'AdGold') {
          content += ' 金币广告：'
        } else if (item === 'AdEnergy') {
          content += ' 体力广告：'
        } else if (item === 'AdTurntable') {
          content += ' 转盘广告：'
        } else if (item === 'AdTV') {
          content += ' 电视机广告：'
        } else if (item === 'AdMagicBall') {
          content += ' 占卜广告：'
        } else if (item === 'AdCard') {
          content += ' 换卡广告：'
        } else if (item === 'AdHideShop') {
          content += ' 神秘商店广告：'
        } else if (item === 'AdBattle') {
          content += ' 战斗失败广告：'
        } else if (item === 'AdAltar') {
          content += ' 祭坛广告：'
        }
        content += objson[item] + ';'
      }
      return content
    }
  },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      date2: [],
      list: null,
      listLoading: true,
      total: 0,
      timeOrder: 2,
      listQuery: {
        page: 1,
        pageNum: 20,
        name: '',
        timeOrder: 2,
        startTime: 0,
        endTime: 0
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      adCntList(this.listQuery).then(response => {
        // this.total = response.data.count
        // this.list = response.data.logList
        // this.listLoading = false
        this.postForm = response.data.log
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.listQuery.timeOrder = this.timeOrder
      if (this.date2 != null && this.date2.length === 2) {
        this.listQuery.startTime = Date.parse(this.date2[0]) / 1000
        this.listQuery.endTime = Date.parse(this.date2[1]) / 1000
      }
      if (this.date2 == null || this.date2.length === 0) {
        this.listQuery.startTime = 0
        this.listQuery.endTime = 0
      }
      this.fetchData()
    },
    handleView(row) {},
    jsonObjToStr(obj) {
      if (obj === []) {
        return '[]'
      }
      if (obj == null) {
        return 'null'
      }
      return JSON.stringify(obj)
    },
    formatTime(dateUnix) {
      if (dateUnix == null) {
        return 'null'
      }
      return new Date(dateUnix).toISOString()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixin.scss";

.createPost-container {
  position: relative;

  .createPost-main-container {
    padding: 10px 10px 10px 10px;

    .postInfo-container {
      position: relative;
      @include clearfix;
      margin-bottom: 10px;

      .postInfo-container-item {
        float: left;
      }
    }
  }

  .word-counter {
    width: 40px;
    position: absolute;
    right: 10px;
    top: 0px;
  }
}

.article-textarea /deep/ {
  textarea {
    padding-right: 40px;
    resize: none;
    border: none;
    border-radius: 0px;
    border-bottom: 1px solid #bfcbd9;
  }
}
</style>
